<template>
  <v-menu :listUrl="listUrl" @refesh="refesh" :calssify="classify"></v-menu>
  <div class="card">
    <v-list :isHome="false" :Data="movieData"></v-list>
  </div>
  <v-pagination @refesh="refesh" :length="dataCount"></v-pagination>
  <div class="loading" v-if="isLoading">
    <van-loading size="50px" type="spinner" />
</div>
</template>

<script>
import { reactive, toRefs } from '@vue/reactivity'
import VMenu from '../components/Menu.vue'
import VList from '../components/List.vue'
import VPagination from '../components/Pagination.vue'
import { onMounted } from '@vue/runtime-core'
import axios from 'axios'
export default {
    components:{
        "v-menu":VMenu,
        "v-list":VList,
        "v-pagination":VPagination
    },
    setup(){
        const state = reactive({
            classify:['分类','全部','动作片','喜剧片','爱情片','科幻片','恐怖片','剧情片','战争片','灾难片','纪录片','悬疑片','合集'],
            movieData:[
                {
                    src:'https://pic.monidai.com/img/c40241fe8e29ee48195fd4893d767421.jpg',
                    name:'极道宗师第二季',
                    desc:'更新至第四集'
                },
                {
                    src:'https://pic.monidai.com/img/c40241fe8e29ee48195fd4893d767421.jpg',
                    name:'极道宗师第二季',
                    desc:'更新至第四集'
                },
                {
                    src:'https://pic.monidai.com/img/c40241fe8e29ee48195fd4893d767421.jpg',
                    name:'极道宗师第二季',
                    desc:'更新至第四集'
                },
                {
                    src:'https://pic.monidai.com/img/c40241fe8e29ee48195fd4893d767421.jpg',
                    name:'极道宗师第二季',
                    desc:'更新至第四集'
                },
                {
                    src:'https://pic.monidai.com/img/c40241fe8e29ee48195fd4893d767421.jpg',
                    name:'极道宗师第二季',
                    desc:'更新至第四集'
                },
                {
                    src:'https://pic.monidai.com/img/c40241fe8e29ee48195fd4893d767421.jpg',
                    name:'极道宗师第二季',
                    desc:'更新至第四集'
                },
                {
                    src:'https://pic.monidai.com/img/c40241fe8e29ee48195fd4893d767421.jpg',
                    name:'极道宗师第二季',
                    desc:'更新至第四集'
                },
                {
                    src:'https://pic.monidai.com/img/c40241fe8e29ee48195fd4893d767421.jpg',
                    name:'极道宗师第二季',
                    desc:'更新至第四集'
                },
                {
                    src:'https://pic.monidai.com/img/c40241fe8e29ee48195fd4893d767421.jpg',
                    name:'极道宗师第二季',
                    desc:'更新至第四集'
                },
                {
                    src:'https://pic.monidai.com/img/c40241fe8e29ee48195fd4893d767421.jpg',
                    name:'极道宗师第二季',
                    desc:'更新至第四集'
                },
                {
                    src:'https://pic.monidai.com/img/c40241fe8e29ee48195fd4893d767421.jpg',
                    name:'极道宗师第二季',
                    desc:'更新至第四集'
                },
                {
                    src:'https://pic.monidai.com/img/c40241fe8e29ee48195fd4893d767421.jpg',
                    name:'极道宗师第二季',
                    desc:'更新至第四集'
                },
                {
                    src:'https://pic.monidai.com/img/c40241fe8e29ee48195fd4893d767421.jpg',
                    name:'极道宗师第二季',
                    desc:'更新至第四集'
                },
                {
                    src:'https://pic.monidai.com/img/c40241fe8e29ee48195fd4893d767421.jpg',
                    name:'极道宗师第二季',
                    desc:'更新至第四集'
                },
                {
                    src:'https://pic.monidai.com/img/c40241fe8e29ee48195fd4893d767421.jpg',
                    name:'极道宗师第二季',
                    desc:'更新至第四集'
                },
                {
                    src:'https://pic.monidai.com/img/c40241fe8e29ee48195fd4893d767421.jpg',
                    name:'极道宗师第二季',
                    desc:'更新至第四集'
                },
                {
                    src:'https://pic.monidai.com/img/c40241fe8e29ee48195fd4893d767421.jpg',
                    name:'极道宗师第二季',
                    desc:'更新至第四集'
                },
                {
                    src:'https://pic.monidai.com/img/c40241fe8e29ee48195fd4893d767421.jpg',
                    name:'极道宗师第二季',
                    desc:'更新至第四集'
                },
            ],
            listUrl:[],
            dataCount:0,
            isLoading:true
        })
        onMounted(()=>{
            axios.get('/api/movie').then(res=>{
                console.log(res.data);
                state.movieData = res.data.list
                state.listUrl = res.data.listUrl
                state.dataCount = res.data.dataCountl
                state.isLoading = false
            })
        })
        const refesh =(e)=>{
            state.isLoading = true
            console.log(e);
            axios.get(`/api${e}`).then(res=>{
                console.log(res.data);
                state.movieData = res.data.list
                state.listUrl = res.data.listUrl
                state.dataCount = res.data.dataCount
                state.isLoading = false
            })
        } 
        return{
            ...toRefs(state),
            refesh
        }
    }
}
</script>

<style scoped>
.card{
    margin-top: 40px;
}
.loading{
    position: fixed;
    top: calc(50vh - 25px);
    left: calc(50vw - 25px);
}
</style>